import React, { Component, Fragment } from "react";
// antd
import { Menu, Table, Button, Col, Pagination, Form, Input, Select, Tag, Dropdown, Space, Popover, Typography } from "antd";
import Action from "@c/buttonAction/Index";
import { DownOutlined } from '@ant-design/icons';


// http
import http from '../../utils/request';
import ExportJsonExcel from "js-export-excel";


const { Option } = Select;
const { Link } = Typography;


class Domain extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_platform: null,
            search_instance_account_name: null,
            search_security_type: null,
            search_option_account_name: [],
            search_option_platform: [],
            search_option_account: [],

            selectedRowKeys: [],
            
            // 表格
            dataSource: [],
            columns: [
                {title: "域名", dataIndex: "domain", key: "domain"},
                {title: "漏洞版本", dataIndex: "security_type", key: "security_type"},
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform", width: "250px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "业务", dataIndex: "business", key: "business"},
                {title: "项目", dataIndex: "local_name", key: "local_name"},
                {title: "实例", dataIndex: "name", key: "name"},
                {title: "地址", dataIndex: "ip", key: "ip"},
                {title: "类型", dataIndex: "resource_type", key: "resource_type"},
                {title: "负责人", dataIndex: "owner", key: "owner"},
                // {title: "分享人", dataIndex: "share", key: "share"},
            ],
        }
        this.formRefLabel = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'security_type__contains': this.state.search_security_type,
            'account_name': this.state.search_instance_account_name,
            'platform': this.state.search_instance_platform,
        }

        // 获取database列表
        http.get('/security/domain', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_security_type: data.security_type ? data.security_type : null,
            search_instance_platform: data.platform ? data.platform : null,
            search_instance_account_name: data.account_name ? data.account_name : null,
            page: 1
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })
        } else {
            this.setState({
                search_option_account: '',
            })
        }
    }


    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        })
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    // 一键导出
    onexportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _cmdb_sheet_filter = ["domain", "security_type", "platform", "account_name", "business", "local_name", "name", "ip", "resource_type", "owner", "share"]
        const _cmdb_sheet_header = ["域名", "漏洞版本", "平台", "账户", "业务", "项目", "名称", "地址", "资源类型", "负责人", "分享人"]

        let option = {}
        option.fileName = "域名安全扫描异常项"
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: "域名安全扫描异常项",
                sheetFilter: _cmdb_sheet_filter,
                sheetHeader: _cmdb_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    render(){
        const { loading, columns, dataSource, page, total, search_option_platform, search_option_account } = this.state
        const content = (
            <div>
                <Link target="_blank" href="https://gykj.yuque.com/qhagw5/kml348/dmlgxdcge6hixnn9?singleDoc# 《域名安全》">
                    漏洞版本说明
                </Link>
            </div>
          );

        const operations = (
            <Menu
                items={[
                    {
                        label: (
                            <Action.Button onClick={() => this.onexportExcelBtn()} >导出页面数据</Action.Button>
                        ),
                        key: '1',
                    },
                ]}
            />
        );

        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} >
                    <Form.Item label="漏洞版本" name="security_type" style={myStyleForm}>
                        <Input placeholder="漏洞版本"  />
                    </Form.Item>

                    <Form.Item label="云平台" name="platform" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择平台"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>   

                    <Form.Item label="云账户" name="account_name" style={myStyleForm}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择云账户"
                                onChange={this.onChangeAccountName}
                                >
                                {search_option_account}
                            </Select>                      
                    </Form.Item>

    
                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Popover content={content} >
                        <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/help.png" alt="logo" style={{ height: '16px'}}/>
                    </Popover>
                </div>
                

                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    // size="small"
                    pagination={false} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 2000 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            // pageSizeOptions={pagination_size_option}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}

export default Domain;